<!DOCTYPE html>
<html lang="" xml:lang="">
  <head>
    <title>🗂 panelset | xaringanExtra</title>
    <meta charset="utf-8" />
    <meta name="author" content="Garrick Aden-Buie" />
    <script src="libs/header-attrs/header-attrs.js"></script>
    <link href="libs/remark-css/robot-fonts.css" rel="stylesheet" />
    <link href="libs/remark-css/robot.css" rel="stylesheet" />
    <link href="libs/panelset/panelset.css" rel="stylesheet" />
    <script src="libs/panelset/panelset.js"></script>
  </head>
  <body>
    <textarea id="source">
class: center, middle, inverse, title-slide

# panelset<br>for xaringan
## 🗂
### <a href='https://www.garrickadenbuie.com/'>Garrick Aden-Buie<a>
### xaringanExtra

---




### &amp;#x1F456; Fancy Panels &amp;#x2728;

.panelset[
.panel[.panel-name[R Code]


```r
library(ggplot2)
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
]

.panel[
.panel-name[
Plot
]

&lt;img src="index_files/figure-html/oplot-1.png" height="425px" /&gt;
]

.panel[

Oops, I forgot to give this panel a name &amp;#x1F937;&amp;#x200D;&amp;#x2642;&amp;#xFE0F;

]
]

---

### Panelset Chunks

You can use the `panelset` chunk option to create two panels from a code chunk:
the "Code" and "Output".

.panelset[

.panel[.panel-name[Chunk 1]

````markdown
```{r panelset = TRUE, results = "hold"}
# Set panelset = TRUE to create "Code" and "Output" tabs
# Use results = "hold" when chunk contains multiple expressions
print("Oak is strong and also gives shade.")
print("The lake sparkled in the red hot sun.")
```
````

]

.panel[.panel-name[Code]

```r
# Set panelset = TRUE to create "Code" and "Output" tabs
# Use results = "hold" when chunk contains multiple expressions
print("Oak is strong and also gives shade.")
print("The lake sparkled in the red hot sun.")
```

]

.panel[.panel-name[Output]

```
## [1] "Oak is strong and also gives shade."
## [1] "The lake sparkled in the red hot sun."
```



]

.panel[.panel-name[Chunk 2]

Use a named vector in `panelset` to set the `source` and `output` panel tab names.

````markdown
```{r panelset = c(source = "ggplot2", output = "Plot")}
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```
````

]

.panel[.panel-name[ggplot2]

```r
ggplot(Orange) +
  aes(x = age, y = circumference, colour = Tree) +
  geom_point() +
  geom_line() +
  guides(colour = "none") +
  theme_bw()
```

]

.panel[.panel-name[Plot]

![](index_files/figure-html/unnamed-chunk-2-1.png)&lt;!-- --&gt;

]

]


---

## How to do this in one easy template

Wrap everything in `.panelset[...]` and create a new panel with

```markdown
.panel[.panel-name[NAME]
...content...
]
```

&amp;#x1F448; The previous slide looks something like this

````markdown
.panelset[
.panel[.panel-name[R Code]

```{r oplot, fig.show='hide'}
# ... r code ...
```
]

.panel[.panel-name[Plot]

![](`r knitr::fig_chunk("oplot", ".png")`)
]
]
````

---

## Customize appearance 


<style>.panelset{--panel-tab-active-foreground: #0051BA;--panel-tab-hover-foreground: #d22;--panel-tab-font-family: Roboto;}</style>

.panelset[
.panel[.panel-name[style_panelset_tabs()]

You can use `style_panelset_tabs()`

````markdown
```{r echo=FALSE}
xaringanExtra::style_panelset_tabs(
  active_foreground = "#0051BA",
  hover_foreground = "#d22",
  font_family = "Roboto"
)
```
````
]

.panel[.panel-name[CSS Custom Properties]

Or use CSS directly...

````markdown
```{css echo=FALSE}
.panelset {
  --panel-tab-foreground: currentColor;
  --panel-tab-active-foreground: #0051BA;
  --panel-tab-hover-foreground: #d22;
  --panel-tabs-border-bottom: #ddd;
  --panel-tab-inactive-opacity: 0.5;
  --panel-tab-font-family: Roboto, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\
}
```
````

See `?style_panelset_tabs()` for the complete list of CSS properties.
]
]

---
class: center middle

[blogdown]: https://bookdown.org/yihui/blogdown/

## It also works in&lt;br&gt;R Markdown and [blogdown]!

Check out [the R Markdown panelset demo](rmarkdown.html)
to see _panelset_ in action!


---
class: center middle

&lt;img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="25%" alt="GitHub Octocat Logo" /&gt;

### [gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra)

    </textarea>
<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create();
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
  window.dispatchEvent(new Event('resize'));
});
(function(d) {
  var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
  if (!r) return;
  s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
  d.head.appendChild(s);
})(document);

(function(d) {
  var el = d.getElementsByClassName("remark-slides-area");
  if (!el) return;
  var slide, slides = slideshow.getSlides(), els = el[0].children;
  for (var i = 1; i < slides.length; i++) {
    slide = slides[i];
    if (slide.properties.continued === "true" || slide.properties.count === "false") {
      els[i - 1].className += ' has-continuation';
    }
  }
  var s = d.createElement("style");
  s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
  d.head.appendChild(s);
})(document);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(function() {
  var deleted = false;
  slideshow.on('beforeShowSlide', function(slide) {
    if (deleted) return;
    var sheets = document.styleSheets, node;
    for (var i = 0; i < sheets.length; i++) {
      node = sheets[i].ownerNode;
      if (node.dataset["target"] !== "print-only") continue;
      node.parentNode.removeChild(node);
    }
    deleted = true;
  });
})();
(function() {
  "use strict"
  // Replace <script> tags in slides area to make them executable
  var scripts = document.querySelectorAll(
    '.remark-slides-area .remark-slide-container script'
  );
  if (!scripts.length) return;
  for (var i = 0; i < scripts.length; i++) {
    var s = document.createElement('script');
    var code = document.createTextNode(scripts[i].textContent);
    s.appendChild(code);
    var scriptAttrs = scripts[i].attributes;
    for (var j = 0; j < scriptAttrs.length; j++) {
      s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
    }
    scripts[i].parentElement.replaceChild(s, scripts[i]);
  }
})();
(function() {
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
      links[i].target = '_blank';
    }
  }
})();</script>

<script>
slideshow._releaseMath = function(el) {
  var i, text, code, codes = el.getElementsByTagName('code');
  for (i = 0; i < codes.length;) {
    code = codes[i];
    if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
      text = code.textContent;
      if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
          /^\$\$(.|\s)+\$\$$/.test(text) ||
          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
        code.outerHTML = code.innerHTML;  // remove <code></code>
        continue;
      }
    }
    i++;
  }
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src  = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
  if (location.protocol !== 'file:' && /^https?:/.test(script.src))
    script.src  = script.src.replace(/^https?:/, '');
  document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
  </body>
</html>
